<template>
    <div class="my-panel">
        <div class="my-info">
            <div @mouseover="showAvatarMask" @mouseleave="hideAvatarMask">
                <img class="avatar" :src="userinfo.avatar">
                <div v-show="avatar_mask_display" @click="modifyAvatar" class="avatar-mask">更换头像</div>
            </div>
            <div>
                <span v-show="!nickname_input_display" class="nickname">{{userinfo.nickname}}</span>
                <span v-show="!nickname_input_display" class="iconfont icon-shuru modify-nickname" @click="showModifyInput"></span>
                <input v-show="nickname_input_display" autofocus type="text" name="nickname" id="input-nickname" v-model="userinfo.nickname">
                <button v-show="nickname_input_display" @click="confirmModifyInput">√</button>
            </div>
            <div>
              <span>ID:{{$store.getters.getMyInfo.id}}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data: () => {
    return {
      userinfo: {
        nickname: '',
        avatar: '',
        id: ''
      },
      avatar_mask_display: false,
      avatar_select: {},
      nickname_input_display: false,
      nickname_input: ''
    }
  },
  methods: {
    showAvatarMask: function () {
      this.$set(this.$data, 'avatar_mask_display', true)
    },
    hideAvatarMask: function () {
      this.$set(this.$data, 'avatar_mask_display', false)
    },
    modifyAvatar: function () {
      let inputObj = document.createElement('input')
      inputObj.setAttribute('id', '_ef')
      inputObj.setAttribute('type', 'file')
      inputObj.setAttribute('style', 'visibility:hidden')
      inputObj.setAttribute('accept', 'image/jpeg, image/png') // image/gif, image/jpeg image/*
      document.body.appendChild(inputObj)
      inputObj.click()
      this.avatar_select = inputObj.value
    },
    showModifyInput: function () {
      this.nickname_input = this.userinfo.nickname
      this.$set(this.$data, 'nickname_input_display', true)
    },
    confirmModifyInput: function () {
      // if (this.nickname_input !== this.userinfo.nickname) {
      //   // alert(this.nickname_input + 'diff' + this.userinfo.nickname)
      //   //todo:向服务器发送修改昵称请求
      // }
      this.$store.commit('modifyMyNickname', this.userinfo.nickname)
      console.log(this.$store.state.my_info.nickname)
      this.$set(this.$data, 'nickname_input_display', false)
    }
  },
  created: function () {
    let myinfo = this.$store.getters.getMyInfo
    // this.$set(this.$data, 'userinfo', {nickname: myinfo.nickname, avatar: myinfo.avatar, id: myinfo.id})
    this.userinfo = {nickname: myinfo.nickname, avatar: myinfo.avatar, id: myinfo.id}
    this.$store.commit('setLeftPanelType', 'my')
  }
}
</script>

<style lang="scss">
.my-panel{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .my-info{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .avatar{
            border-radius: 50%;
            width: 100px;
            height: 100px;
        }
        .avatar-mask{
          width: 100px;
          height: 100px;
          z-index: 100;
          background: black;
          opacity: 0.5;
          color: white;
          text-align: center;
          line-height: 100px;
          border-radius: 50%;
          display: block;
          position: absolute;
          transform: translateY(-105px);
          // top: 0;
          // left: 0;
          &:hover{
            cursor: pointer;
          }
        }
        .nickname{
            font-weight: bold;
        }
        .modify-nickname{
          &:hover{
            cursor: pointer;
          }
        }
    }
}
</style>
